<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      background: linear-gradient(120deg, #f4f2ec 0%, #6f5f5a 100%);
    }
    .login-box {
      width: 400px;
      padding: 60px 35px;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      color: #333333;
      text-align: center;
    }
    .login-box h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #333;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-control {
      width: calc(100% - 20px);
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      outline: none;
      font-family: 'Lato', sans-serif;
      color: #333333;
    }
    .btn {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: 5px;
      background: #403d3c;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .btn:hover {
      background: #504f4b;
    }
    .link {
      margin-top: 15px;
    }
    .link select {
      width: 100%;
      padding: 10px;
      border: 1px solid #cccccc;
      border-radius: 5px;
      background: #ffffff;
      color: #333333;
      font-family: 'Lato', sans-serif;
      outline: none;
    }
  </style>
</head>
<body>
<div class="login-box">
  <h3>学生信息管理系统</h3>
  <div class="form-group">
    <input type="text" class="form-control" name="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" name="pwd" placeholder="请输入密码">
  </div>
  <button type="button" class="btn" onclick="get1()">登录</button>
<!--  <div class="link">-->
<!--    <select id="choose" name="choose">-->
<!--      <option value="1">登录为学生</option>-->
<!--      <option value="2">登录为教师</option>-->
<!--      <option value="3">登录为管理员</option>-->
<!--    </select>-->
<!--  </div>-->
</div>

<script>
  //ajax前后端交互实现登录跳转
  function get1() {
    var username = $("input[name='username']").val();
    var pwd = $("input[name='pwd']").val();
    if (username === "" && pwd === "") {
      alert("用户名、密码为空！请重新输入！");
    } else if (username === "") {
      alert("用户名为空，请重新输入！！！");
    } else if (pwd === "") {
      alert("密码为空，请重新输入！！！");
    } else {
      $.ajax({
        url: '/logon1', //后台接口地址
        type: 'get', //请求方式，一般为get、post
        dataType: 'text',
        data: {
          username: username,
          pwd: pwd
        },
        success: function(data) {
          if (data == "0") {
            alert("用户名不存在！");
          } else if (data == "2") {
            alert("密码错误！");
          } else if (data == "3") { //超级管理员
            alert("欢迎用户 " + username + " 登录！超级管理员！！！");
            window.open("/index?username=" + username, "_parent");
          } else if (data == "1") {
            alert("欢迎用户 " + username + " 登录！普通教师！！！");
            window.open("/indexteacher?username=" + username, "_parent");
          } else {
            alert("欢迎用户 " + username + " 登录！学生！！！");
            window.open("/indexstudent?username=" + username, "_parent");
          }
        },
        error: function() {
          alert("请求失败");
        }
      });
    }
  }
</script>
</body>
</html>
